/*
 * Created: 2022-08-27 10:41:37
 * Author : 涛涛涛
 */

import React, { FC, useContext } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { ProductExhibitionContext } from '@/pages/ProductExhibition/ProductExhibitionContext';
import { useClassName } from '@/utils/index';
import { useFinishTime } from './useFinishTime';

import DownTime from './DownTime/DownTime';
export interface IProps extends ICompProps {}
FinishTime.defaultProps = {} as Partial<IProps>;
function FinishTime(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('FinishTime', className);
    const { date, hour } = useFinishTime();
    const {
        product: { status },
    } = useContext(ProductExhibitionContext);
    return (
        <RootView className={localClassName} style={style}>
            <View className="FinishTime-top">
                <Text className="Text">发行结束时间</Text>
                <Text className="Text">{date}</Text>
                <Text className="Text">{hour.time}</Text>
                <Text className="Text xm">{hour.xm}</Text>
            </View>
            {status === 'waitForSale' && <DownTime />}
        </RootView>
    );
}
export default React.memo(FinishTime as FC<IProps>);
const RootView = styled(View)`
    &.FinishTime {
        padding: 60px 30px;
        font-size: 30px;
        .FinishTime-top {
            > .Text {
                color: #333;
                font-weight: 600;
            }
            > .Text + .Text {
                margin-left: 20px;
            }
            > .Text.xm {
                margin-left: 0px;
                font-size: 24px;
            }
        }
    }
`;
